<template>
  <!-- 客户资料 -->
  <div class="customer_data">
    <div class="datum">客户资料</div>
    <div class="form">
      <el-form style="padding: 20px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="客户姓名" style="display: block">
              <el-input placeholder="" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职业" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学历" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="所在地区" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="微信号" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="在职情况" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前薪资" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="QQ" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" style="display: block">
              <el-radio-group>
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分隔符 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="目标薪资" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <!-- 客户意向 -->
  <div class="Customer_intention">
    <div class="purpose">客户意向</div>
    <div class="form">
      <el-form style="font-size: 12px; color: #666; padding: 20px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="意向学科" style="display: block">
              <el-input placeholder="" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学习原因" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职业计划" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间计划" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分隔符 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="意向课程" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他意向" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item> </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <!-- 添加沟通记录 -->
  <div class="communication">
    <div class="record">添加沟通记录</div>
    <div class="form">
      <el-form style="font-size: 12px; color: #666; padding: 20px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="跟进状态" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下次跟进时间" style="display: block">
              <el-date-picker type="datetime" placeholder="Select date and time" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item> </el-form-item>
          </el-col>
        </el-row>
        <!-- 分隔符 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="沟通重点" style="display: block">
              <el-select clearable placeholder="Select" style="width: 100%" size="large">
                <el-option />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="沟通纪要" style="display: block">
              <el-input placeholder="" style="width: 100%" size="large"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18"></el-col>
          <el-col :span="6" style="display: flex; justify-content: end">
            <el-button type="primary" round size="large">保存</el-button>
            <el-button type="info" @click="dialogVisible = true" round size="large"
              >退回公海</el-button
            >
            <el-button type="info" round size="large">转成交客户</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
  <!-- 历史沟通记录 -->
  <div class="communication_record">
    <div class="history">历史沟通记录</div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
  <follow-up v-model:dialogVisible="dialogVisible"></follow-up>
</template>
<script setup>
import { ref } from 'vue'
import FollowUp from './components/FollowUp.vue'

const dialogVisible = ref(false)
</script>
<style lang="scss" scoped>
.customer_data {
  .datum {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
  .form {
    background-color: #fff;
    padding: 20px;
  }
}
.Customer_intention {
  background-color: #fff;
  .purpose {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
  .form {
    background-color: #fff;
    padding: 20px;
  }
}
.communication {
  .record {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
  .form {
    background-color: #fff;
    padding: 20px;
  }
}
.communication_record {
  background-color: #fff;
  .history {
    padding-left: 20px;
    background-color: #fff;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e8;
  }
}
</style>
